<template>
  <div class="layout-container">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="logo-container">
        <img src="@/assets/imgs/logo.png" alt="" class="logo">
        <div class="title">云存储系统</div>
      </div>
      <div class="user-info">
        <span class="user-type">普通用户</span>
        <el-dropdown @command="handleCommand">
          <div class="user-dropdown-link">
            <img class="avatar"
                 :src="data.user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
                 alt="">
            <span class="username">{{ data.user.name }}</span>
            <el-icon class="el-icon--right">
              <CaretBottom/>
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="cloud-drive/profile">
                <el-icon>
                  <User/>
                </el-icon>
                个人资料
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <el-icon>
                  <SwitchButton/>
                </el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <div class="main-container">
      <!-- 优化后的侧边栏 -->
      <div class="sidebar">
        <el-menu
            router
            class="sidebar-menu"
            :default-active="router.currentRoute.value.path"
        >

          <!-- 文件管理 -->
          <el-menu-item index="/cloud-drive/home">
            <el-icon>
              <House/>
            </el-icon>
            <span>系统主页</span>
          </el-menu-item>

          <!-- 文件管理（下拉菜单优化） -->
          <el-sub-menu index="/cloud-drive/fileManage">
            <template #title>
              <!-- 左侧点击区域（触发路由跳转） -->
              <div
                  class="menu-title"
                  @click="router.push('/cloud-drive/fileManage')"
              >
                <el-icon>
                  <Folder/>
                </el-icon>
                <span>我的文件</span>
              </div>
            </template>

            <!-- 图片管理 -->
            <el-menu-item index="/cloud-drive/fileManage/picture">
              <el-icon>
                <Picture/>
              </el-icon>
              <span>图片管理</span>
            </el-menu-item>

            <!-- 视频管理 -->
            <el-menu-item index="/cloud-drive/fileManage/video">
              <el-icon>
                <VideoCamera/>
              </el-icon>
              <span>视频管理</span>
            </el-menu-item>

            <!-- 文档管理 -->
            <el-menu-item index="/cloud-drive/fileManage/document">
              <el-icon>
                <Document/>
              </el-icon>
              <span>文档管理</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 回收站 -->
          <el-menu-item index="/cloud-drive/recycle">
            <el-icon>
              <Delete/>
            </el-icon>
            <span>回收站</span>
          </el-menu-item>

          <el-sub-menu index="/cloud-drive/share">
            <!-- 共享中心 -->
            <template #title>
              <!-- 左侧点击区域（触发路由跳转） -->
              <div>
                <el-icon>
                  <Share/>
                </el-icon>
                <span>共享中心</span>
              </div>
            </template>

            <!-- 我共享的 -->
            <el-menu-item index="/cloud-drive/share">
              <el-icon>
                <SortUp/>
              </el-icon>
              <span>我共享的</span>
            </el-menu-item>

<!--             我收到的 -->
            <el-menu-item index="/cloud-drive/share/DownloadLink">
              <el-icon>
                <SortDown/>
              </el-icon>
              <span>下载共享链接</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 个人设置 -->
          <el-menu-item index="/cloud-drive/profile">
            <el-icon>
              <User/>
            </el-icon>
            <span>个人设置</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 主要内容区域 -->
      <div class="content">
        <router-view @updateUser="updateUser"/>
      </div>

    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import router from "@/router";
import {ElMessage, ElMessageBox} from "element-plus";
import {getLocalStroage, removeLocalStroage} from "@/utils/LocalStroageUtil";

const data = reactive({
  user: getLocalStroage() || {}
})

if (!data.user) {
  ElMessage.error('登录信息失效，请重新请登录！')
  router.push('/login')
}

const updateUser = () => {
  data.user = getLocalStroage() || {}
}

const handleCommand = (command) => {
  if (command === 'logout') {
    ElMessageBox.confirm(
        '确定要退出系统吗？',
        '退出提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
    ).then(() => {
      ElMessage.success('退出成功')
      removeLocalStroage()
      router.push('/login')
    }).catch(() => {
    })
  } else {
    router.push(`/${command}`)
  }
}

</script>

<style scoped>
.layout-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  height: 60px;
  background: #409EFF; /* 修改为淡蓝色背景 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  color: white;
  position: relative;
  z-index: 1000;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.title {
  font-weight: bold;
  font-size: 22px;
  margin-left: 12px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: 1px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-type {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

.user-dropdown-link {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.username {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.main-container {
  display: flex;
  min-height: calc(100vh - 60px);
  position: relative;
}

.sidebar {
  width: 220px;
  background-color: white;
  transition: width 0.3s ease; /* 添加过渡动画 */
  position: relative;
}

/* 添加侧边栏收缩控制按钮 */
.sidebar-control {
  position: absolute;
  right: -20px;
  top: 20px;
  background: #fff;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  z-index: 1000;
}

.sidebar-menu {
  border: none;
  padding: 10px 0;
}

.content {
  flex: 1;
  padding: 24px;
  background-color: #f8f8ff;
  min-height: calc(100vh - 60px);
  position: relative;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-menu-item.is-active) {
  background-color: #fff1f0 !important;
  color: #c8161d !important;
  border-right: 3px solid #c8161d;
  font-weight: 500;
}

:deep(.el-menu-item:hover) {
  background-color: #fff1f0 !important;
  color: #c8161d !important;
}

:deep(.el-sub-menu__title:hover) {
  background-color: #fff1f0 !important;
}

:deep(.el-menu-item) {
  border-radius: 4px;
  margin: 4px 8px;
  height: 50px;
  line-height: 50px;
  transition: all 0.3s ease;
}

:deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;
}

:deep(.el-menu-item .el-icon),
:deep(.el-sub-menu__title .el-icon) {
  margin-right: 12px;
  font-size: 18px;
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
}

:deep(.el-dropdown-menu__item .el-icon) {
  margin-right: 4px;
}

:deep(.el-dropdown-menu__item:not(.is-disabled):hover) {
  background-color: #fff1f0;
  color: #c8161d;
}

:deep(th) {
  color: #333;
  background-color: #fafafa;
  font-weight: 500;
}

:deep(.el-card) {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-button--primary) {
  background-color: #c8161d;
  border-color: #c8161d;
}

:deep(.el-button--primary:hover) {
  background-color: #d4262d;
  border-color: #d4262d;
}

:deep(.el-form-item) {
  margin-bottom: 22px;
}

:deep(.el-input) {
  border-radius: 4px;
}

@media screen and (max-width: 768px) {
  .sidebar {
    width: 64px;
  }

  .content {
    padding: 16px;
  }

  .title {
    display: none;
  }
}

/* 左侧标题点击区域样式 */
.menu-title {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

/* 调整子菜单标题整体布局 */
:deep(.el-sub-menu__title) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
</style>
